<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="include :: header('完善项目信息')" />
  <th:block th:include="include :: jquery-ui-css" />
  <th:block th:include="include :: jsplumb-css" />
</head>
<body>
<div class="ibox-content">
  <div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
      <li><a th:href="@{'/project/projectInfo/edit/'+${projectId}}" aria-expanded="false">基本信息</a></li>
      <li class="active"><a th:href="@{'/project/projectFlow/edit/'+${projectId}}" aria-expanded="true">工艺处理流程</a></li>
      <li><a th:href="@{'/project/projectFlowParam/'+${projectId}}" aria-expanded="false">工艺处理流程参数</a></li>
      <li><a th:href="@{'/project/projectTech/edit/'+${projectId}}" aria-expanded="false">工艺运行情况</a></li>
      <li><a th:href="@{'/project/projectEqp/edit/'+${projectId}}" aria-expanded="false">设备运行情况</a></li>
      <li><a th:href="@{'/project/projectWater/edit/'+${projectId}}" aria-expanded="false">水质指标情况</a></li>
      <li><a th:href="@{'/project/projectMicro/edit/'+${projectId}}" aria-expanded="false">菌剂使用情况</a></li>
      <li><a th:href="@{'/project/projectPharm/edit/'+${projectId}}" aria-expanded="false">药剂使用情况</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active">
        <form class="form-horizontal m" id="form-projectFlow-edit" th:object="${projectFlow}">
          <input name="flowId" th:field="*{flowId}" type="hidden">
          <input name="projectId" th:field="*{projectId}" type="hidden">
          <input name="flowIds" id="flowIds" type="hidden">
          <input name="urldata" id="urldata" type="hidden">
          <input name="flowPicUrl" th:field="*{flowPicUrl}" type="hidden">
          <div class="col-sm-4">
            <div class="form-group">
              <label class="col-sm-4 control-label">图片：</label>
              <div class="col-sm-6">
                <input name="otherPicUrl" id="otherPicUrl" type="file" accept="image/*">
              </div>
              <div class="col-sm-2">
                <div th:if="${projectFlow.otherPicUrl != null and projectFlow.otherPicUrl != ''}">
                  <img class='img-circle img-xs' data-target='self' th:src="'/abvfile/flow/'+${projectFlow.otherPicUrl}">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div id="left-wrapper" class="col-sm-2">
                <ul class="sidebar-nav">
                  <li>
                    <a>
                      <i class="fa fa-folder-o"></i>
                      <span>污水模块</span>
                    </a>
                    <ul>
                      <li class="node">
                        <a href="javascript:void(0);" id="raw">
                          <i class="fa fa-database"></i>
                          <span>污水</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li th:each="dict : ${@dict.getType('tech_flow')}">
                    <a><i class="fa fa-folder-o"></i>
                    <span th:text="${dict.dictLabel}"></span>
                    </a>
                    <ul>
                      <li class="node" th:each="sf : ${sfList}" th:if="${sf.flowType == dict.dictValue}">
                        <a href="javascript:void(0);" th:id="${sf.flowId}">
                          <i class="fa fa-crosshairs"></i>
                          <span th:text="${sf.flowName}" />
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="col-sm-10">
                <div class="panel panel-default" style="margin:2px;height:900px">
                  <div class="panel-body">
                    <div id="flow-panel" class='col-md-12 jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan draggable' style="position:absolute;height:100%">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <input id="jsonOutput" type="hidden" th:value="${projectFlow.flowData}" />
        </form>
      </div>
      <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
          <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
          <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jsplumb-js" />
<th:block th:include="include :: html2canvas-js" />
<script th:inline="javascript">
  var prefix = ctx + "project/projectFlow";
  var otherPicData = '';
  // $("#form-projectFlow-edit").validate({
  //   focusCleanup: true
  // });
  $(function() {
    $("#otherPicUrl").change(function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);//调用自带方法进行转换
      reader.onload = function (e) {
        var srcBase = this.result;
        var imgNum = srcBase.split(";base64,");
        otherPicData = imgNum[1];
      }
    });

    $.form.imgView("#form-projectFlow-edit");
  });


  function submitHandler() {
    let p1 = new Promise(function(resolve,reject){
      resolve(flowImage());
    });
    let p2 = new Promise(function(resolve,reject){
      resolve(saveFlowchart());
    });
    Promise.all([p1,p2]).then(function(values) {
      const picdata = values[0];
      const flowdata = values[1];
      if(flowdata == null || flowdata == '') {
        $.modal.msgError("工艺处理流程图不能为空！");
        return;
      }
      let data = $("#form-projectFlow-edit").serializeArray();
      data.push({"name": "flowData", "value": flowdata});
      data.push({"name": "picData", "value": picdata});
      if (otherPicData != '')
        data.push({"name": "otherPicData", "value": otherPicData});
      $.ajax({
        url: prefix + "/edit",
        type: "post",
        dataType: "json",
        data: data,
        success: function(result) {
          if (result.code == web_status.SUCCESS) {
            layer.msg(result.msg, { icon: $.modal.icon(modal_status.SUCCESS), time: 1000},function() {
              location.reload();
            });
          } else if (result.code == web_status.WARNING) {
            $.modal.msgWarning(result.msg)
          } else {
            $.modal.msgError(result.msg);
          }
          $.modal.closeLoading();
        }
      });
    });
  }
</script>
</body>
</html>
